<template>
  <div>
      <header>紫蝴蝶音乐</header>
      <div class="content">
        <div class="content_a">
            <router-link class="content_nav" to="/home">首页</router-link>
            <router-link class="content_nav" to="/recommend">推荐</router-link>
            <router-link class="content_nav" to="/hotsong">热歌榜</router-link>
        </div>
    
        <router-view></router-view>
       
      </div>
      
  </div>  
</template>

<script>
 /* eslint-disable */

export default {
  name: 'index',
//   router:router,

  
}
</script>

<style scoped lang="scss">

  header{
    width:100vw;
    height:20vw;
    background-color: purple;
    color:#fff;
    font-size:18px;
    line-height: 20vw;
    text-align: center;
  }
  .content{
      width:100vw;
      position: absolute;
      top:20vw;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      
      .content_a{
        width:100vw;
        height:10vw;
        margin-bottom:5vw;
        .content_nav{
            text-decoration: none;
            width:33.33vw;
            float:left;
            line-height: 10vw;
            text-align:center;
            color:#666;
            background:#fcfcfd;
            &:hover{
              border-bottom:2px solid purple;
            }
        }

      }
  }
</style>
